$(function(){

    function dealUrl(url){
        console.log(url)
        // 将？后面的参数全部匹配出来 用正则进行匹配
        let reg= /^[^\s]+\?([^&\s\d]+=[^\s]+)*/
        let match = reg.exec(url)
        match=match[1]
        if(!match){
            return null
        }

        //解码
        let queryString = decodeURI(match)

        // 解析成键值对
        let queryArr = queryString.split('&')
        let queryObj={}
        queryArr.forEach(item=>{
            let itemArr=item.split('=')
            queryObj[itemArr[0]]=itemArr[1]
        })

        return queryObj
    }
    let params= dealUrl(location.href)
    console.log(params)


    function render(data=[]){
        let html="";
        data.forEach(item=>{
            html+=`
            <li class="clearfix">
                ${item.couponProductImg}
                <p>${item.couponProductName}</p>
                <h3>${item.couponProductPrice}</h3>
                <h4>${item.couponProductTime}</h4>
            </li>
            `
        })
        $('.cop').html(html)
    }

    // 将图片加载到轮播图中
    function carousel(data=[]){
        let html="";
        data.forEach(item=>{
           html+=`
            <li class="showimg">${item.couponProductImg}</li>
        ` 
        })
        $('.move').html(html)
    }

    let n=0
    let total=0
    //点击出现轮播图
    $('.cop').on('click','.clearfix',function(){
        n=$(this).index()
        $('.move').animate({
            left:-n*(200)
        },200).finish().parent().parent().animate({
            position:'fixed',
            top:0,
        },200)
        // $('.carousel').css({
        //     position:'fixed',
        //     top:0,
        // })
    })

    //点击x 轮播图收回
    $('.off').on('click',function(){
        $('.carousel').css({
            position:'fixed',
            top:'-22rem'
        })
    })



    $.ajax({
        url:`http://chst.vip:1234/api/getcouponproduct?couponid=${params.couponid}`

    }).then(res=>{
        total=res.result.length;
        render(res.result);
        carousel(res.result);

        var lis=document.querySelectorAll('.showimg')
        // console.log(lis);
        // console.log(lis.length);
        // var n=0; 
        //点击右边的按钮
        $('.Right').on('click',function(){
            n++;
            tan(n)
            n=Math.min(n,total-1)
            if(n>lis.length){
                n=lis.length;
            }
            var m=n*(-200);
        $('.move').css({
            position:'absolute',
            width: '304rem',
            height: '5.333333rem',
            left:m+'px',
            })
        })

        
        //点击左边的按钮
        $('.Left').on('click',function(){
            tan(n)
            n--;
            n=Math.max(0,n)
            if(n<0){
                n=0;
                alert('已经是第一页啦')
            }
            var m=n*(-200);
            $('.move').css({
                position:'absolute',
                width: '304rem',
                height: '5.333333rem',
                left:m+'px'
                })
            })
    })


    function tan(num){
        // console.log(num)
        if(num===0){
            alert('已经是第一页了')
        }else if(num===total){
            alert('已经是最后一页了')
        }
    }
})